<template>
  <div>
    <header>
      <div class="home-menu pure-menu pure-menu-horizontal">
        <a class="pure-menu-heading pure-menu-link" href="#/">Home</a>
        <ul class="pure-menu-list">
          <li class="pure-menu-item"><router-link class="pure-menu-link" to="/query-links">常用鏈接</router-link></li>
          <li class="pure-menu-item"><router-link class="pure-menu-link" to="/beautiful-words">古詩文</router-link></li>
        </ul>
      </div>
    </header>
    <div class='splash-container' :style='splashStyle' @mousewheel.prevent='handleMousewheel'>
      <div class='content' :style='{marginTop: margintop}'>
        <p>昨夜西風凋碧樹<br>獨上高樓<br>望盡天涯路</p>
        <p>衣帶漸寬終不悔<br>爲伊消得人憔悴</p>
        <p>衆裏尋他千百度<br>驀然回首<br>那人正在燈火闌珊處</p>
      </div>
    </div>
    <footer>
      <div class='pure-foot'>
        This site was built with vue.js, webpack and pure.css
      </div>
    </footer>
  </div>
</template>

<script>
import Land from '@/../static/imgs/forward.jpg'
export default {
  data () {
    return {
      splashStyle: {
        background: `url(${Land}) no-repeat`,
        backgroundSize: '100% 100%',
        backgroundColor: '#1f8dd6',
        height: '800px'
      },
      margintop: '100%'
    }
  },
  methods: {
    handleMousewheel (e) {
      const dy = e.deltaY
      if (dy > 0) {
        this.margintop = '4em'
      } else {
        this.margintop = '100%'
      }
    }
  }
}
</script>

<style src='./styles.scss' lang='scss'></style>

<style lang='scss' scoped>
.splash-container {
  z-index: -11;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: scroll;

  .content {
    height: 100%;
    background: white;
    writing-mode: tb-rl;
    width: 100%;
    letter-spacing: 0.2em;
    text-align: start;
    transition: all 1s;

    p {
      padding: 1em;
    }
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.pure-foot {
  padding: 1em;
  background: #2d3e50;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
}
</style>
